import React, { useState, useRef, useEffect } from 'react';
import styles from './index.less';
import { connect, history, Link } from 'umi';

// import { Button } from 'antd';
import { Button } from 'antd-mobile';

const Demo = props => {
  const [bannerData, setBannerData] = useState(null);

  const linkList = () => {
    // 跳转到指定路由
    // history.push('/list');

    // 带参数跳转到指定路由
    // history.push('/list?a=b');
    history.push({
      pathname: '/list',
      query: {
        a: 'b',
      },
    });

    // 跳转到上一个路由
    // history.goBack();
  };

  const getUserInfo = () => {
    props.dispatch({
      type: 'home/getBannerList',
      callback: res => {
        setBannerData(res.data);
        console.log(res.data);
      },
    });
  };

  return (
    <div>
      <h1 className={styles.title}>Page index</h1>

      <button onClick={linkList}>跳转1</button>
      <Link
        to={{
          pathname: '/list',
          search: '?sort=name',
          hash: '#the-hash',
          state: { fromDashboard: true },
        }}
      >
        跳转2
      </Link>

      {bannerData && <img src={bannerData.banner[0].url} alt="" />}

      <Button onClick={getUserInfo} type="primary">
        发起请求
      </Button>
    </div>
  );
};

const mapStateToProps = state => {
  const dvaData = state.home;
  return {
    dvaData,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    dispatch,
  };
};

// @connect 只适用类 无状态组件不支持装饰器写法
export default connect(mapStateToProps, mapDispatchToProps)(Demo);
